<template>
  <div class="textbook-list">
    <el-card class="page-card">
      <template #header>
        <div class="card-header">
          <span>教材列表</span>
          <el-button type="primary" @click="handleCreate">新增教材</el-button>
        </div>
      </template>

      <el-form :inline="true" class="search-form">
        <el-form-item label="教材名称">
          <el-input v-model="searchForm.name" placeholder="请输入教材名称" />
        </el-form-item>
        <el-form-item label="分类">
          <el-select v-model="searchForm.categoryId" placeholder="请选择分类">
            <el-option 
              v-for="item in categoryList" 
              :key="item.id" 
              :label="item.name" 
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="tableData" v-loading="loading">
        <el-table-column label="教材名称" prop="name" />
        <el-table-column label="分类" prop="categoryName" />
        <el-table-column label="作者" prop="author" />
        <el-table-column label="出版社" prop="publisher" />
        <el-table-column label="发布日期" prop="publishDate" width="180" />
        <el-table-column label="创建时间" prop="createTime" width="180" />
        <el-table-column label="操作" fixed="right" width="200">
          <template #default="{ row }">
            <el-button link type="primary" @click="handleEdit(row)">编辑</el-button>
            <el-button link type="primary" @click="handlePreview(row)">预览</el-button>
            <el-button link type="danger" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const loading = ref(false)
const tableData = ref([])
const categoryList = ref([])

const searchForm = ref({
  name: '',
  categoryId: ''
})

const handleCreate = () => {
  // TODO: 实现新增教材
}

const handleSearch = () => {
  // TODO: 实现搜索功能
}

const handleReset = () => {
  searchForm.value = {
    name: '',
    categoryId: ''
  }
}

const handleEdit = (row) => {
  // TODO: 实现编辑功能
}

const handlePreview = (row) => {
  // TODO: 实现预览功能
}

const handleDelete = (row) => {
  // TODO: 实现删除功能
}

// 获取分类列表
const loadCategoryList = async () => {
  // TODO: 实现加载分类列表
}
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-form {
  margin-bottom: 20px;
}
</style>
